<template>
<div class="address"  :class="{'floatShowing':showFloat }">
	<div class="outterBox">
		<div class="addressBox" v-for= "add in  list" @click="focusAddress(add.id ,add.userId)">
			<div class="mainCon">
				<div class="leftCon">
					<div class="name">
						{{add.receiverName}}
					</div>
					<div class="add1">
						<span>{{add.receiverProvince}}</span>
						<span>{{add.receiverCity}}</span>
					</div>
					<div class="add2">
						{{add.receiverAddress}}
					</div>
					<div class="phone">
						{{add.receiverPhone}}
					</div>
				</div>
				<div class=" rightCon" :class="{'selected':metSelect(add.id)}">
					<div class="choosenCon" :class="{'selected':metSelect(add.id)}">
							
					</div>
				</div>
			</div>

			<div class="buttonBox" v-show="metSelect(add.id)">
				<div class="goComfirmOrder" @click='goComfirmOrder(add.id)' >
					配送到此地址
				</div>
				<div class="edit" @click="editAddress(add)">
					编辑
				</div><div class="delete" @click= "deleteAddress(add.id)">
					删除
				</div>
			</div>
		</div>
		<div class="addAddress" @click="addAddress()">
			+点击添加地址
		</div>
	</div>

	<div class="floatBox"  v-show="showFloat" @click.self="closeFloatBox()">
		<login v-show='showLogin' @loginSuccess="loginCallback()"></login>
    <div class="addOutBox">
		<div class="editBox" v-show="!showLogin">
			<input class='edit-content name' type='text' @focus="movetosight($event)"  v-model="formData.receiverName"	placeholder="请输入姓名" autocomplete="off">
      <label for="province">省份</label >
			<select name="province" id="province" v-model="receiverProvince" autocomplete="off">
				<option  selected="selected">省份</option>
				<option v-for="prov in provinceList">
					{{prov}}
				</option>
			</select>
      <label for="city">城市</label for="city">
			<select name="city" id="city" v-model="formData.receiverCity" autocomplete="off">
				<option  selected="selected">城市</option>
				<option v-for="city in cityList">
					{{city}}
				</option>
			</select>
			<input class='edit-content' type='text' @focus="movetosight($event)"  v-model="formData.receiverAddress"	placeholder="请输入详细地址" autocomplete="off">
			<input class='edit-content' type='text' @focus="movetosight($event)"  v-model="formData.receiverPhone"	placeholder="请输入手机号" autocomplete="off">
			<input class='edit-content' type='text' @focus="movetosight($event)"  v-model="formData.receiverZip"	placeholder="请输入邮政编码" autocomplete="off">
		</div>
		<div class="doAddAddress button" @click="doAddAddress()"  v-show="!showEditButton">
			添加地址
		</div>
		<div class="updateEdit button" @click="updateEdit()" v-show="showEditButton">
			保存修改
		</div>
</div>
	</div>
</div>
</template>

<script>
import 'common/css/reset.css';
import login from  "components/login/login";

var _address   =require("common/util/server/address.js");
var _cities   =require("common/util/server/cities.js");
export default {

  name: 'address',
  watch:{

  	receiverProvince: function(){
  		this.formData.receiverProvince=this.receiverProvince;
  		this.cityList= _cities.getCities(this.receiverProvince);
  	},
  },
  created(){
  	let _this=this;
  	_address.getAddressList(function(res){
  		_this.list=res.data.list;
  	},function(err){
  		_this.showFloat=true;
  		_this.showLogin=true;
  	})
  	this.provinceList=_cities.getProvinces();
  },
 
  methods:{
    closeFloatBox(){
      this.showFloat=false;
    },
  	loginCallback(){
  		this.showLogin=false;
  		this.showFloat=false;
  	},
  	goComfirmOrder(id){

  	this.$router.push({name:"payList",params:{id:id}})
  	// this.$route.push({path:`/paylist/${this.formData.id}`})
  	},
  	deleteAddress(id){
  		var _this=this;
  		_address.deleteAddress({shippingId:id},function(res){
  				_address.getAddressList(function(res){
				  			_this.list=res.data.list;

				  	},function(err){
				  		///登陆 
				  		_this.showFloat=true;
				  		_this.showLogin=true;
				  	})
  		},function(res){
  			window.alert(res.data.msg);
  		})
  	},
  	editAddress(add){
  		this.formData.id=add.id;
  		this.formData.receiverProvince=add.receiverProvince;
  		this.formData.receiverCity=add.receiverCity;
  		this.formData.receiverPhone=add.receiverPhone;
  		this.formData.receiverAddress=add.receiverAddress;
  		this.formData.receiverZip=add.receiverZip;
  		this.formData.receiverName=add.receiverName;
  		this.showEditButton =true;
  		this.showFloat=true;

  		
  	},
  	updateEdit(){
  		var _this= this;
  		_address.update(this.formData,function(res){
  			_this.showFloat=false;

  		_this.formData.receiverProvince="";
  		_this.formData.receiverCity="";
  		_this.formData.receiverPhone="";
  		_this.formData.receiverAddress="";
  		_this.formData.receiverZip="";
  		_this.formData.receiverName="";

  			_this.showEditButton=false;
  			_address.getAddressList(function(res){
  			_this.list=res.data.list;

  	},function(err){
  		///登陆 
  		_this.showFloat=true;
  		_this.showLogin=true;
  	})
  		},function(err){
  			window.alert(err.data);
  		}

  		)
  	},
  	doAddAddress(){
  		var _this= this;
  		_address.save(this.formData,function(res){
  			_this.showFloat=false;
  			_address.getAddressList(function(res){
  			_this.list=res.data.list;
  	},function(err){
  		///登陆 
  		_this.showFloat=true;
  		_this.showLogin=true;
  	})
  		},function(err){
  			window.alert(err.data);
  		}

  		)
  	},
  	movetosight(e){
  			let _this=this;
  			let panel=e.target;
  			setTimeout(function(){
  				panel.scrollIntoView(true);
  				panel.scrollIntoViewIfNeeded();
  			},200)
  		},
  	addAddress(){
  		this.showFloat=true;
  	},
  	metSelect(id){
  		
  		return this.formData.id === id ;

  	},
  	focusAddress(id ,userId){
  		console.log(1)
  		
  		this.formData.id=id;
  		this.formData.userId=userId;
  	},
  },
  components:{
  	login
  },
  data () {
    return {
    	list:{},
    	showLogin:false,
    	showFloat:false,
    	showEditButton:false,
    	selectedAddId:"",
    	provinceList:[],
    	cityList:[],
    	receiverProvince:"",
    	
    	formData:{
    		id:"",
    		userId:"",
			receiverName:"",
			receiverPhone:"",
			receiverMobile:"",
			receiverProvince:"省份",
			receiverCity:"",
			receiverAddress:"",
			receiverZip:"",
    	}
    }
  }
}
</script>

<style lang="stylus" scoped>
.address
  width:100%
  height:100vh
  .outterBox
    width:90%
    margin:10px auto 
    border-radius:5px
    box-shadow:5px 5px 10px #bfbfbf
    background:#fff
    .addressBox
      padding:10px
      border-bottom:.5px solid #bfbfbf
      .mainCon
        display:flex
        height:100px
        .leftCon
          flex:1
          height:100px
          font-size:16px
          line-height:22px
          .name
            font-weight:700
            font-size:18px
        .rightCon
          flex:0 0 30px
          height:100px
          .choosenCon
            height:22px
            width:22px
            border-radius:50%
            padding:4px
            border:2px solid #666
            background-clip:content-box
            &.selected
               border:2px solid rgb(222,64,43)
               background-color:rgb(222,64,43)
      .buttonBox
        width:100%
        font-size:0
        .goComfirmOrder
          width:100%
          border:.5px solid #666
          height:45px
          background:rgb(222,64,43)
          font-weight:700
          font-size:20px
          line-height:45px
          text-align:center
          color:#fff
          margin-bottom:15px
        .edit
          height:30px
          width:40%
          font-size:16px
          line-height:30px
          text-align:center
          border:.5px solid #333
          background:rgb(234,234 , 236)
          margin-right:18%
          display:inline-block
        .delete
          height:30px
          width:40%
          font-size:16px
          line-height:30px
          text-align:center
          border:.5px solid #333
          background:rgb(234,234 , 236)
          display:inline-block
    .addAddress
      font-size:18px
      font-weight:700
      line-height:40px
      text-align:center
  .floatBox
    background:rgba(0, 0, 0, .4) 
    .addOutBox
      width:80%
      margin:100px auto;
      height:65%    
      background:#fff
      border-radius:5px
      .editBox
        text-align:center
        padding-top:15px
        .edit-content
          width:80%
          border: 2px solid rgb(118,120,130)
          margin:15px auto
          height:40px
          line-height:40px
          padding:0 10px
          display:inline-block
          outline:none
          font-size:20px
          &.name
            display:block
        #province
          background:rgb(234,236,236)
          height:30px
          width:25%
        #city
          background:rgb(234,236,236)
          height:30px
          width:25%
      .button
        height:40px
        width:90%
        background:rgb(222, 64, 43)
        margin:0 auto
        line-height:40px
        color:#fff
        font-size:20px
        font-weight:700
        text-align:center
        
        
          
.floatBox{
	position:fixed;
	height:100%;
	width:100%;
 top:0;
 left:0; 
	
}

.nav-simple{
  display:none !import;
}

</style>